<template>
  <x-select
    ref="selectRef"
    :localdata="listData"
    @confirm="confirm"
    :multiple="false"
  />
  <button @click="open">打开</button>
  <x-select
    v-model:visible="visible"
    :localdata="listData2"
    @confirm="confirm"
    :multiple="true"
    valueField="id"
    labelValue="name"
  />
  <button @click="visible = true">multiple</button>
  <view>选中的 {{ item }}</view>
</template>
<script setup lang="ts">
  import { ref } from "vue";

  const listData = ref(
    new Array(100).fill(0).map((item, index) => {
      return {
        value: index,
        label: `label-${index}`,
      };
    })
  );

  const item = ref([]);

  const selectRef = ref();
  function open() {
    selectRef.value?.open();
  }
  const confirm = (value) => {

    item.value = value;
  };

  const visible = ref(false);

  const listData2 = ref([
    {
      id: 1,
      name: "111",
    },
    {
      id: 2,
      name: "222",
    },
    {
      id: 3,
      name: "3333",
    },
  ]);
</script>
